<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ page session="false"%>
<html>
<head>
<title>All Users</title>
<link rel="stylesheet" href="resources/mytheme/css/main.css">
<link rel="stylesheet" type="text/css" href="resources/mytheme/css/slider.css">
<script src="resources/js/jQuery.js"></script>
<script src="resources/js/slider.js"></script>
<script type="text/javascript" src="resources/js/paging.js"></script>

<link rel="stylesheet" href="resources/mytheme/css/jquery-ui.css" type="text/css" media="screen" />
<script type="text/javascript" src="resources/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui.js"></script>
<link rel="stylesheet" href="resources/mytheme/css/jquery.ui.chatbox.css">
<script type="text/javascript" src="resources/js/jquery.ui.chatbox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
	$(document).ready(function() {
		var d = new Date();
		document.getElementById("demo").innerHTML = d.getTime();
	});
</script>
<script type="text/javascript">
		/*
			document ready.
		*/
		$(document).ready(function()
		{
			/*
				declare gloabl box variable,
				so we can check if box is alreay open,
				when user click toggle button
			*/
			var box = null;
			
			/*
				we are now adding click hanlder for 
				toggle button.
			*/
			
			$("#chatLink").click(function(event, ui)
			{
				/*
					now if box is not null,
					we are toggling chat box.
				*/
				if(box)
				{
					/*
						below code will hide the chatbox that 
						is active, when first clicked on toggle button
					*/

					box.chatbox("option", "boxManager").toggleBox();
				}
				else
				{
					/*
						if box variable is null then we will create
						chat-box.
					*/
					box = $("#chat_div").chatbox(
					{
						/*
							unique id for chat box
						*/
						id:"Runnable",
                        user:
						{
							key : "value"
						},
						/*
							Title for the chat box
						*/
						title : "Acme Claims Health Chat",
						/*
							messageSend as name suggest,
							this will called when message sent.
							and for demo we have appended sent message to our log div.
						*/
						messageSent : function(id, user, msg)
						{
							$("#log").append(id + " said: " + msg + "<br/>");
                            $("#chat_div").chatbox("option", "boxManager").addMsg(id, msg);
                        }
					});
				}
			});
		});
    </script>

<script type="text/javascript">
function addRole(userID, contextPath) {
	console.log("something happened");
	var dropDown = document.getElementById("dropDownAddRole" + userID);
	var dropDownValue = dropDown.options[dropDown.selectedIndex].value;
	var url = contextPath + "/Admin/Roles/" + userID + "?action=add&role=" + dropDownValue;
	window.location.href = url;
	
}

function removeRole(userID, contextPath) {
	var dropDown = document.getElementById("dropDownRemoveRole" + userID);
	var dropDownValue = dropDown.options[dropDown.selectedIndex].value;
	var url = contextPath + "/Admin/Roles/" + userID + "?action=remove&role=" + dropDownValue;
	window.location.href = url;
}
</script>
</head>

<body>
	<div id="headerContainer">
		<div id="chat_div" ></div>
		<div class="centerContainer">
			<ol>
			<sec:authorize ifAllGranted="ROLE_ADMIN">
				<li><a href="AdminUsers">Users</a></li>
				<li><a href="AdminRejectedClaims">Rejected Claims</a></li>
				<li><a href="AdminAcceptedClaims">Accepted Claims</a></li>
				<li><a href="AdminAllClaims">All Claims</a></li>
			</sec:authorize>
			<sec:authorize ifAnyGranted="ROLE_ADMIN, ROLE_ADJUSTER">
				<li><a href="InsuranceAdjuster">Adjust Claims</a></li>
			</sec:authorize>
			</ol>
		</div>
		<!-- /centerContainer -->

	</div>
	<!-- /headerContainer -->

	<div id="secondHeaderContainer">
		<div class="logoContainer">
			<img src="resources/mytheme/images/logo2.png" alt="logo" width="205"
				height="89">
		</div>
		<!-- /logoContainer -->
		<div class="navContainer">

			<ul id="navWrapper">
				<li><a href="/AcmeClaims">Home</a></li>
				<sec:authorize ifNotGranted="ROLE_ADMIN">
				<c:if test="${pageContext.request.userPrincipal.name != null}">
					<li>
						<!-- Menu A --> <a href="#">Claims</a>
						<ul>
							<li><a href="ClaimPortal">Submit Claim</a></li>
							<li><a href="MyAccount">View Claim</a></li>
						</ul>
					</li>
					<li><a href="MyAccount">My Account</a></li>
				</c:if>
				</sec:authorize>
				<li><a href="locatedoctor">Find a Doctor</a></li>
			</ul>
		</div>
		<!-- /navContainer -->
	</div>
	<!-- /secondHeaderContainer -->

	<div id="thirdHeaderContainer">
		<div class="lowerheaderContainer">
			<c:if test="${pageContext.request.userPrincipal.name != null}">
				<ol>
					<li><a href="<c:url value="/MyAccount" />">${pageContext.request.userPrincipal.name}</a></li>
					<li>|</li> 
	                <li><a href="<c:url value="/Logout" />" > Logout</a></li>
                 </ol> 
			</c:if>
			<c:if test="${pageContext.request.userPrincipal.name == null}">
				<ol>
					<li><a href="Login">Log-In</a></li>
					<li>|</li>
					<li><a href="register">Register</a></li>
				</ol>
			</c:if>
		</div>
		<!-- /lowerHeader-->
	</div>
	<!--/thirdHeaderContainer"-->
	<div id="mainCenterHolder">
	<div class="mainCenterContainerAdminStuff">
	<div class="mainCenterContainerAdminUsers">
		<table class="paginated-table">
			<tr class="d0">
				<td class ="enableCol">User ID</td>
				<td class ="enableCol">Enabled</td>
				<td class ="enableCol2">Username</td>
				<td>Name</td>
				<td class ="enableCol2">Gender</td>
				<td class ="enableCol">SSN</td>
				<td class ="enableCol">Insurance #</td>
				<td class ="enableCol">Birthday</td>
				<td colspan= "2">Roles</td>
				<td class ="showing3" ></td>
			</tr>
			<c:forEach items="${Users }" var="user">
				<tr>
					<td class ="enableCol">${user.userID }</td>
					<td class ="enableCol">${user.enabled }</td>
					<td class ="enableCol2">${user.username }</td>
					<td class ="showing">${user.fName } ${user.lName }</td>
					<td class ="enableCol2">${user.gender }</td>
					<td class ="enableCol" width="10%">${user.SSN }</td>
					<td class ="enableCol">${user.insuranceNumber }</td>
					<td class ="enableCol">${user.birthday }</td>
					<td class ="showing2" colspan="2" width= "20%">
						<select id="dropDownRemoveRole${user.userID }" class="dropDownFix">
							<option value="">-Roles-</option>
							<c:forEach items="${user.roles }" var="role">
								<option value="${role.authID }">${role.authority }</option>
							</c:forEach>
						</select>
						<input type="button" value="Remove" onclick="removeRole('${user.userID }', '${pageContext.request.contextPath }')">
						<select id="dropDownAddRole${user.userID }" class="dropDownFix">
							<option value="">-Add Role-</option>
							<option value="ROLE_USER">ROLE_USER</option>
							<option value="ROLE_ADJUSTER">ROLE_ADJUSTER</option>
							<option value="ROLE_ADMIN">ROLE_ADMIN</option>
						</select>
						<input type="button" value="Add" onclick="addRole('${user.userID }', '${pageContext.request.contextPath }')">
					</td>
					<td class ="showing3">
						<c:if test="${user.enabled == true}">
							<a href="Admin/Disable/${user.userID }">Disable User</a>
						</c:if>
						<c:if test="${user.enabled == false}">
							<a href="Admin/Enable/${user.userID }">Enable User</a>
						</c:if>
					</td>
				</tr>
			</c:forEach>
		</table>
		<div class="prev">Previous</div><div class="next">Next</div>
	</div>
	</div>
	</div>
	<div id="footer">
		<div class="footerwrap">
			<div class="foota">
				<br>
				<p>Connect With Us</p>
				<div id="footapad">
					<a href="#"><img src="resources/mytheme/images/fb.png"
						id="facebook" alt="logo" width="67" height="73" /></a> <a href="#"><img
						src="resources/mytheme/images/twit.png" id="twitter" alt="logo"
						width="65" height="73" /></a> <a href="#"><img
						src="resources/mytheme/images/pin.png" id="pintrest" alt="logo"
						width="67" height="73" /></a>


				</div>
			</div>
			<div class="footb">
				<br>
				<p>Toll Free: 1-800-382-3827</p>
				<ol>
					<li>Acme Corporate</li>
					<li>143 23rd Ave South</li>
					<li>Fargo, North Dakota 58121</li>
				</ol>
			</div>
			<div class="footc">
				<br>
				<p>Need Help?</p>
				<ol>
					<li><a href="#" id="chatLink">Join Live Chat</a></li>
					<li><a href="#">Contact Us</a></li>
					<li><a href="#">FAQ's</a></li>
				</ol>
				<p id="demo" style="visibility: hidden;" />
			</div>
		</div>
		<!-- FooterWrap -->
	</div>
	<!-- Footer -->
</body>
</html>